<template>
	<view>
		<uv-waterfall ref="waterfall" v-model="list" :add-time="10" :left-gap="leftGap" :right-gap="rightGap"
			:column-gap="columnGap" @changeList="changeList">
			<!-- 第一列数据 -->
			<template v-slot:list1>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view @click="toDetail(item)" v-for="(item, index) in list1" :key="item.id" class="waterfall-item"
						@longpress="longHandle(item)">
						<view class="waterfall-item__image" :style="imageStyle(item)">
							<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
						</view>
						<view class="waterfall-item__ft">
							<view class="waterfall-item__ft__title">
								<text class="value">{{item.title}}</text>
							</view>
							<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item.titleDesc}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 第二列数据 -->
			<template v-slot:list2>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view @click="toDetail(item)" v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
						<view class="waterfall-item__image" :style="imageStyle(item)">
							<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
						</view>
						<view class="waterfall-item__ft">
							<view class="waterfall-item__ft__title">
								<text class="value">{{item.title}}</text>
							</view>
							<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item.titleDesc}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</uv-waterfall>
		<uv-load-more  @loadmore='loadmore' :status="loadStatus"></uv-load-more>
	</view>
</template>

<script setup>
	import {
		ref,
		computed 
	} from 'vue'
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {getLostListApi} from '../../api/index.js'
	//列表数据
	const list = ref([])
	const list1 = ref([]) // 瀑布流第一列数据
	const list2 = ref([]) // 瀑布流第二列数据
	const leftGap = ref(10)
	const rightGap = ref(10)
	const columnGap = ref(10)
	const loadStatus = ref('loadmore')
	const pages = ref(0)
	//列表查询的参数
	const parms = {
		currentPage:1,
		pageSize:5,
		type:'0'
	}
	//跳转详情页面
	const toDetail = (item)=>{
		// console.log(item)
		uni.navigateTo({
			url:'../lost_detail/lost_detail?item='+encodeURIComponent(JSON.stringify(item))
		})
	}
	//设置list1和list2里面的数据
	const changeList = (e) => {
		const res = [e.name][0];
		if (res == 'list1') {
			list1.value.push(e.value)
		}
		if (res == 'list2') {
			list2.value.push(e.value)
		}
	}
	//设置图片的尺寸
	const imageStyle = computed((item) => {
		return item => {
			const v = uni.upx2px(750) - leftGap.value - rightGap.value - columnGap.value;
			const w = v / 2;
			// const rate = w / 300;
			// const h = rate* 600;
			return {
				width: w + 'px',
				// height: h + 'px'
			}
		}
	})
	
	
	//获取列表
	const getList = async()=>{
		let res = await getLostListApi(parms)
		if(res && res.code == 200){
			pages.value = res.data.pages;
			list.value = list.value.concat(res.data.records);
			if(parms.currentPage >= pages.value){
				loadStatus.value = 'nomore'
			}else{
				loadStatus.value = 'loadmore'
			}
		}
	}
	//加载更多
	const loadmore = ()=>{
		if(parms.currentPage >= pages.value){
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		parms.currentPage = ++parms.currentPage;
		getList()
	}
	onReachBottom(() => {
		console.log('触底加载')
		if(parms.currentPage >= pages.value){
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		parms.currentPage = ++parms.currentPage;
		getList()
	})
	onLoad(()=>{
		getList()
	})
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		background: #f1f1f1;
	}
	/* #endif */
</style>
<style scoped lang="scss">
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
	.waterfall {
		background-color: #f1f1f1;
	}
	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}
	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;
		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;
			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}
		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}
		&__btn {
			padding: 10px 0;
		}
	}
</style>
